<template>
  <div class="aa">
    <el-header
      style="
        height: 60px;
        display: flex;
        align-items: center;
        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
        margin: -30px 0px 0px 0px;
      "
    >
      <i
        :class="collapseIcon"
        @click="handleCollapse"
        style="font-size: 30px"
      ></i>
      <el-breadcrumb separator="/" style="margin-left: 20px"> </el-breadcrumb>
      <div
        style="
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        "
      >
        <el-dropdown placement="bottom">
          <div style="display: flex; align-items: center; cursor: pointer">
            <span>{{ username }}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <button
                @click="handlePassword"
                style="background: transparent; border: none; cursor: pointer"
              >
                修改密码
              </button>
            </el-dropdown-item>
            <el-dropdown-item>
              <button
                @click="handleLogout"
                style="background: transparent; border: none; cursor: pointer"
              >
                退出登录
              </button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 修改密码模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isPasswordDialogVisible"
      width="30%"
    >
      <el-form ref="passwordForm" :model="passwordForm" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="username" disabled></el-input>
        </el-form-item>
        <el-form-item label="旧密码">
          <el-input
            type="password"
            v-model="passwordForm.oldPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
            type="password"
            v-model="passwordForm.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input
            type="password"
            v-model="passwordForm.confirmNewPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isPasswordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HeaderT",
  props: {
    collapseIcon: String,
    handleCollapse: Function,
  },
  data() {
    return {
      username: localStorage.getItem("username") || "管理员",
      passwordForm: {
        oldPassword: "",
        newPassword: "",
        confirmNewPassword: "",
      },
      isPasswordDialogVisible: false,
      dialogTitle: "修改密码",
    };
  },

  methods: {
    validatePasswords() {
      if (this.passwordForm.newPassword === this.passwordForm.oldPassword) {
        this.$message.error("旧密码与新密码一致，修改失败");
        return false;
      }
      return true;
    },
    handlePassword() {
      this.isPasswordDialogVisible = true;
    },
    async updatePassword() {
      const userData = {
        username: this.username,
        oldPassword: this.passwordForm.oldPassword, // 旧密码
        newPassword: this.passwordForm.newPassword, // 新密码
        confirmNewPassword: this.passwordForm.confirmNewPassword,
      };
      if (this.validatePasswords()) {
        this.$refs.passwordForm.validate(async (valid) => {
          if (valid) {
            try {
              const response = await axios.post(
                "https://localhost:7018/api/User/ChangePassword",
                userData
              );
              if (response) {
                this.$message.success("密码修改成功,请重新登录！");
                this.isPasswordDialogVisible = false;
                this.passwordForm.newPassword = "";
                this.passwordForm.confirmNewPassword = "";
                this.passwordForm.oldPassword = "";
                // 清除认证信息
                localStorage.removeItem("token");
                localStorage.removeItem("username");
                // 重定向到登录页面
                this.$router.push("/");
              }
            } catch (error) {
              this.$message.error("修改失败！");
              console.log(this.passwordForm.newPassword);
            }
          }
        });
      }
    },
    handleLogout() {
      // 清除认证信息
      localStorage.removeItem("token");
      localStorage.removeItem("username");
      // 重定向到登录页面
      this.$router.push("/");
      this.$message.success("退出成功！如需请重新登录！");
    },
  },
};
</script>

<style>
.aa {
  background-color: #37a3fe;
}
</style>
